<template>
	<view class="fast-select-radio">
		<scroll-view 
			scroll-y 
			class="fast-select-left"
		>
			<view 
				class="fast-select-item" 
				:class="value[0] == i ? 'selected' : ''"
				v-for="(item, i) in data[0]" 
				@click.stop="changeLeft(item, i)"
			>
			{{ item }}
			</view>
		</scroll-view>
		<view v-if="interval" class="fast-select-interval" >{{ interval }}</view>
		<scroll-view 
			scroll-y
			class="fast-select-right"
		>
			<view 
				class="fast-select-item" 
				:class="value[1] == i ? 'selected' : ''"
				v-for="(item, i) in data[1]"
				@click.stop="changeRight(item, i)"
			>
			{{ item }}
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Array,
				default: () => {
					return []
				}
			},
			interval: {
				type: String,
				default: ''
			},
			//下拉框数据源
			data: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
			}
		},
		methods: {
			changeRight(item, index){
				if(!this.value[0]){
					this.$set(this.value, 0, 0)
				}
				this.$set(this.value, 1, index)
				this.$emit('input', this.value)
				this.$emit('change', this.value)
			},
			changeLeft(item, index){
				this.$set(this.value, 0, index)
			},
		}
	}
</script>

<style lang="less" scoped>
	.fast-select-radio{
		height: 60vw;
		display: flex;
		
		.fast-select-left{
			height: 100%;
			width: 50%;
		}
		
		.fast-select-right{
			height: 100%;
			width: 50%;
		}
		
		.fast-select-interval{
			display: flex;
			align-items: center;
		}
		
		
		.fast-select-item{
			text-align: center;
		}
		
		.selected{
			color: #007AFF;
		}
	}

</style>
